<template>
  <div class="registration-container">
    <div class="registration-card">
      <div class="header">
        <h2 class="title">注册信息</h2>
        <p class="subtitle">请填写以下个人信息，带 * 为必填项</p>
      </div>
      <form @submit.prevent="handleSubmit" class="form">
        <!-- 学号 -->
        <div class="form-group">
          <label class="label">学号 <span class="required">*</span></label>
          <input
            type="text"
            v-model.trim="form.studentId"
            class="input"
            placeholder="请输入学号"
            required
          />
        </div>
        
        <!-- 姓名 -->
        <div class="form-group">
          <label class="label">姓名 <span class="required">*</span></label>
          <input
            type="text"
            v-model.trim="form.name"
            class="input"
            placeholder="请输入姓名"
            required
          />
        </div>
        
        <!-- 班级 -->
        <div class="form-group">
          <label class="label">班级 <span class="required">*</span></label>
          <input
            type="text"
            v-model.trim="form.className"
            class="input"
            placeholder="请输入班级"
            required
          />
        </div>
        
        <!-- 技术方向 -->
        <div class="form-group">
          <label class="label">意向技术方向 <span class="required">*</span></label>
          <div class="select-container">
            <select v-model="form.techDirection" class="select" required>
              <option value="" disabled>请选择技术方向</option>
              <option v-for="option in directions" :key="option" :value="option">
                {{ option }}
              </option>
            </select>
          </div>
        </div>
        
        <!-- 专升本 -->
        <div class="form-group">
          <label class="label">专升本 <span class="required">*</span></label>
          <div class="radio-group">
            <label class="radio-label">
              <input
                type="radio"
                v-model="form.isZsb"
                :value="true"
                class="form-radio"
              />
              是
            </label>
            <label class="radio-label">
              <input
                type="radio"
                v-model="form.isZsb"
                :value="false"
                class="form-radio"
              />
              否
            </label>
          </div>
        </div>
        
        <!-- 党员状态 -->
        <div class="form-group">
          <label class="label">是否党员 <span class="required">*</span></label>
          <div class="radio-group">
            <label class="radio-label">
              <input
                type="radio"
                v-model="form.isPartyMember"
                :value="true"
                class="form-radio"
              />
              是
            </label>
            <label class="radio-label">
              <input
                type="radio"
                v-model="form.isPartyMember"
                :value="false"
                class="form-radio"
              />
              否
            </label>
          </div>
        </div>
        
        <!-- 竞赛方向 -->
        <div class="form-group">
          <label class="label">意向竞赛</label>
          <input
            type="text"
            v-model.trim="form.competitionDirection"
            class="input"
            placeholder="请输入意向参加的竞赛"
          />
        </div>
        
        <!-- 职务 -->
        <div class="form-group">
          <label class="label">学生会/社团/班级职务</label>
          <input
            type="text"
            v-model.trim="form.position"
            class="input"
            placeholder="请输入担任的职务"
          />
        </div>
        
        <!-- 特长爱好 -->
        <div class="form-group">
          <label class="label">特长爱好</label>
          <input
            type="text"
            v-model.trim="form.hobbies"
            class="input"
            placeholder="请输入特长爱好"
          />
        </div>
        
        <!-- 宗教信仰 -->
        <div class="form-group">
          <label class="label">宗教信仰</label>
          <input
            type="text"
            v-model.trim="form.religion"
            class="input"
            placeholder="请输入宗教信仰"
          />
        </div>
        
        <!-- 毕业状态 -->
        <div class="form-group">
          <label class="label">是否毕业 <span class="required">*</span></label>
          <div class="radio-group">
            <label class="radio-label">
              <input
                type="radio"
                v-model="form.isGraduated"
                :value="true"
                class="form-radio"
              />
              是
            </label>
            <label class="radio-label">
              <input
                type="radio"
                v-model="form.isGraduated"
                :value="false"
                class="form-radio"
              />
              否
            </label>
          </div>
        </div>
        
        <!-- 密码 -->
        <div class="form-group">
          <label class="label">密码 <span class="required">*</span></label>
          <input
            type="password"
            v-model="form.password"
            class="input"
            placeholder="请输入密码"
            required
          />
          <span v-if="errors.password" class="error-message">{{ errors.password }}</span>
        </div>
        
        <!-- 手机号 -->
        <div class="form-group">
          <label class="label">手机号 <span class="required">*</span></label>
          <input
            type="text"
            v-model="form.phoneNumber"
            class="input"
            placeholder="请输入手机号"
            required
          />
          <span v-if="errors.phoneNumber" class="error-message">{{ errors.phoneNumber }}</span>
        </div>
        
        <!-- 按钮组 -->
        <div class="button-group">
          <button 
            type="submit" 
            class="submit-button" 
            :disabled="submitting"
          >
            {{ submitting ? '提交中...' : '提交' }}
          </button>
          <button 
            type="button" 
            @click="resetForm" 
            class="reset-button" 
            :disabled="submitting"
          >
            重置
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

// 路由实例
const router = useRouter();

// API客户端配置
const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080',
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' }
});

// 技术方向选项
const directions = [
  '前端开发',
  '后端开发',
  '移动开发',
  '人工智能',
  '大数据',
  '云计算',
  '网络安全'
];

// 表单数据类型定义
interface FormState {
  studentId: string;
  name: string;
  className: string;
  techDirection: string;
  isZsb: boolean;
  isPartyMember: boolean;
  competitionDirection: string;
  position: string;
  hobbies: string;
  religion: string;
  isGraduated: boolean;
  password: string;
  phoneNumber: string;
}

// 错误信息类型定义
interface Errors {
  password?: string;
  phoneNumber?: string;
}

// 表单状态
const form = reactive<FormState>({
  studentId: '',
  name: '',
  className: '',
  techDirection: '',
  isZsb: false,
  isPartyMember: false,
  competitionDirection: '',
  position: '',
  hobbies: '',
  religion: '',
  isGraduated: false,
  password: '',
  phoneNumber: ''
});

// 错误状态
const errors = reactive<Errors>({
  password: '',
  phoneNumber: ''
});

// 提交状态
const submitting = ref(false);

// 表单验证函数
function validateForm(): { isValid: boolean; errors: Errors } {
  const newErrors: Errors = {};
  
  // 验证密码长度
  if (form.password.length < 6) {
    newErrors.password = '密码长度不能小于 6 位';
  }
  
  // 验证手机号格式
  if (!/^1\d{10}$/.test(form.phoneNumber)) {
    newErrors.phoneNumber = '请输入有效的 11 位手机号码';
  }
  
  return {
    isValid: Object.keys(newErrors).length === 0,
    errors: newErrors
  };
}

// 处理表单提交
async function handleSubmit() {
  const { isValid, errors: newErrors } = validateForm();
  
  if (!isValid) {
    Object.assign(errors, newErrors);
    return;
  }
  
  submitting.value = true;
  
  try {
    // 准备提交数据
    const payload = {
      username: form.studentId,
      password: form.password,
      className: form.className,
      isGraduated: form.isGraduated ? 1 : 0,
      techDirection: form.techDirection,
      phoneNumber: form.phoneNumber
    };
    
    // 发送注册请求
    const response = await apiClient.post('/user/signup', payload);
    
    if (response.status === 200) {
      // 注册成功，跳转到登录页面
      router.push('/login');
    }
  } catch (err: any) {
    console.error('注册失败:', err);
    alert(err.response?.data?.msg || '注册失败，请重试');
  } finally {
    submitting.value = false;
  }
}

// 重置表单
function resetForm() {
  Object.assign(form, {
    studentId: '',
    name: '',
    className: '',
    techDirection: '',
    isZsb: false,
    isPartyMember: false,
    competitionDirection: '',
    position: '',
    hobbies: '',
    religion: '',
    isGraduated: false,
    password: '',
    phoneNumber: ''
  });
  
  // 清除错误信息
  errors.password = '';
  errors.phoneNumber = '';
}
</script>

<style scoped>
/* 主容器样式 */
.registration-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 注册卡片样式 */
.registration-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  padding: 30px;
}

/* 表单头部样式 */
.header {
  text-align: center;
  margin-bottom: 30px;
}

.title {
  color: #333;
  margin-bottom: 8px;
}

.subtitle {
  color: #666;
  font-size: 14px;
}

/* 表单组样式 */
.form-group {
  margin-bottom: 24px;
}

.label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.required {
  color: #f44336;
}

.input,
.select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.input:focus,
.select:focus {
  border-color: #4285f4;
  outline: none;
}

/* 选择框容器 */
.select-container {
  width: 100%;
}

/* 单选按钮组 */
.radio-group {
  display: flex;
  gap: 20px;
}

.radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.form-radio {
  margin-right: 8px;
}

/* 错误消息 */
.error-message {
  display: block;
  margin-top: 8px;
  color: #f44336;
  font-size: 12px;
}

/* 按钮组 */
.button-group {
  display: flex;
  gap: 16px;
}

.submit-button,
.reset-button {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-button {
  background-color: #4285f4;
  color: white;
}

.submit-button:disabled {
  background-color: #aaa;
  cursor: not-allowed;
}

.reset-button {
  background-color: #f1f1f1;
  color: #333;
}

.reset-button:hover {
  background-color: #e0e0e0;
}
</style>